<!DOCTYPE html>
<html lang="pt">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
	<title>Crossroads</title>
	
	<link rel="stylesheet" href="css/font-face/fonts.css" type="text/css">
	<link rel="stylesheet" href="css/default.css" type="text/css">
	
	<script src="js/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script src="js/maps.js" type="javascript"></script>
	
	</head>
	
	<body>
		<div id="wrapper" class="test">
			<div id="content">
				<header>
					<div id="" class="one_col col_margin">
						<div id="brand">
							<a href="javascript:;"><img src="img/crossroads.png" alt="Crossroads - Home" /></a>
						</div>
					</div>
					<div id="menuPrincipal" class="two_col col_margin">
						<nav id="menu">
							<div id="menuItem"><a href="javascrit:;">Amigos</a></div>
							<div id="menuItem"><a href="javascrit:;">Grupos</a></div>
							<div id="menuItem"><a href="javascrit:;">Rotas</a></div>
						</nav>
					</div>
					<div id="" class="two_col col_margin">
					</div>
				</header>
				<section class="">
					<div id="" class="tree_col col_margin">
						<form id="addressForm" action="/">
							<div>
							<label for="address">Address:</label>
							<input type="text" name="address" id="address" />
							<input type="submit" id="addressButton" value="Get Coordinates" />					
							</div>
						</form>
					</div>
					<div id="" class="two_col">
						oi
					</div>
					
					<div id="mapas" class="four_col col_margin">
						<div id="mapController">
							<img src="img/map-fltro.png" class="controllerActive" />
							<div id="mapControllers" class="none">
								<hr />
								<ul>
									<li>Amigos</li>
									<li>Twitter</li>
									<li>Facebook</li>
									<li>Places</li>
								</ul>
								<hr />
							</div>
						</div>
						<div id="map">
							
						</div>
					</div>
				</section>
				<footer>
					
				</footer>
			</div>
		</div>
	</body>
</html>
<script>
	(function() {
		/*COntroller do mapa */
		
		$(".controllerActive").click(function () {
	      $("#mapControllers").slideToggle("slow");
	    });

		
		
		
		var mapWidth = $("#map").width();
		var mapHeight = (mapWidth *9)/16;		
		$("#map").height(mapHeight);
		
		$(window).resize(function() {
			if($(window).width() == 600)
			alert("600");
		  	var mapWidth = $("#map").width();
			var mapHeight = (mapWidth *9)/16;
			
			$("#map").height(mapHeight);
		});
		
		// Defining some global variables
  var map, geocoder, marker, infowindow;
  
  window.onload = function() {
	  
    // Creating a new map
    var options = {  
      zoom: 3,  
      center: new google.maps.LatLng(37.09, -95.71),  
      mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
	  
    map = new google.maps.Map(document.getElementById('map'), options);

    // Getting a reference to the HTML form
    var form = document.getElementById('addressForm');

    // Catching the forms submit event
    form.onsubmit = function() {
      // Getting the address from the text input
      var address = document.getElementById('address').value;
      
      // Making the Geocoder call 
      getCoordinates(address);
      
      // Preventing the form from doing a page submit
      return false;
      
    }
    
  }

  // Create a function the will return the coordinates for the address
  function getCoordinates(address) {
    // Check to see if we already have a geocoded object. If not we create one
    if(!geocoder) {
      geocoder = new google.maps.Geocoder();	
    }

    // Creating a GeocoderRequest object
    var geocoderRequest = {
      address: address
    }

    // Making the Geocode request
    geocoder.geocode(geocoderRequest, function(results, status) {
      
      // Check if status is OK before proceeding
      if (status == google.maps.GeocoderStatus.OK) {

        // Center the map on the returned location
        map.setCenter(results[0].geometry.location);

        // Check to see if we've already got a Marker object
        if (!marker) {
          // Creating a new marker and adding it to the map
          marker = new google.maps.Marker({
            map: map
          });
        }
        
        // Setting the position of the marker to the returned location
        marker.setPosition(results[0].geometry.location);

        // Check to see if we've already got an InfoWindow object
        if (!infowindow) {
          // Creating a new InfoWindow
          infowindow = new google.maps.InfoWindow();
        }

        // Creating the content of the InfoWindow to the address
        // and the returned position
        var content = '<strong>' + results[0].formatted_address + '</strong><br />';
        content += 'Lat: ' + results[0].geometry.location.lat() + '<br />';
        content += 'Lng: ' + results[0].geometry.location.lng();

        // Adding the content to the InfoWindow
        infowindow.setContent(content);

        // Opening the InfoWindow
        infowindow.open(map, marker);

      } 
      
    });
  
  }

 
	})();
</script>



	